<template>
  <u-popup :show="updateData.update" mode="center" @close="close" @open="open" closeable :closeOnClickOverlay="false">
    <view class="content">
      <view class="header">
        <text class="title">发现新版本</text>
        <!-- <view class="close" @click="close">x</view> -->
      </view>
      
      <view class="desc">
        <text class="note">
          {{updateData.note}}
        </text>
      </view>
      <view class="progress-box" v-if="progressData.totalBytesWritten > 0">
        <text class="label">下载进度:</text>
        <u-line-progress :percentage="progressData.progress" activeColor="#25C27D"></u-line-progress>
      </view>
      <view class="footer note" v-if="progressData.totalBytesWritten > 0">
        <text>{{progressData.totalBytesWritten}}</text>
        <text>/</text>
        <text>{{progressData.totalBytesExpectedToWrite}}</text>
      </view>
    </view>
    <view class="btn" hover-class="opacityHover" v-if="!progressData.totalBytesWritten" @click="rightNowUpdate">立即更新</view>
  </u-popup>
</template>

<script>
  import { checkAppUpdate, downloadApp } from '@/utils/tools.js'
  export default {
    name: 'UpdatePopup',
    data() {
      return {
      }
    },
    computed: {
      progressData() {
        return this.$store.state.downloadProgressData
      },
      updateData() {
        return this.$store.state.updateData
      }
    },
    methods: {
      open() {
        
      },
      close() {
        this.$store.commit('setUpdateData', {
          ...this.updateData,
          update: false
        })
      },
      rightNowUpdate() {
        downloadApp(this.updateData)
      }
    }
  }
</script>

<style scoped>
  .u-line-progress{
    margin: 0 10rpx;
  }
  .content {
    position: relative;
    width: 600rpx;
    /* min-height: 500rpx; */
    box-shadow: 0 0 6rpx #fff;
    padding: 30rpx 20rpx;
  }
  
  .header{
    text-align: center;
    position: relative;
  }
  .close{
    position: absolute;
    top: -12rpx;
    right: 0;
    padding: 6rpx 10rpx;
    font-size: 30rpx;
  }
  .title {
    /* text-align: center; */
    font-weight: bold;
    padding: 10rpx;
  }

  .desc {
    margin: 50rpx 0;
    text-align: center;
  }
  .label{
    /* margin-right: 10rpx; */
    /* font-weight: bold; */
  }

  .progress-box {
    display: flex;
    /* flex-direction: column; */
    align-items: center;
    margin: 20rpx 0;
  }

  .btn {
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    text-align: center;
    background-color: #25C27D;
    color: #fff;
    padding: 20rpx 0;
  }
  .footer{
    display: flex;
    justify-content: flex-end;
  }
  .opacityHover{
    opacity: .8;
  }
</style>
